<template>
	<view>
		<custom-nav-sq-xcx :isBack="true" currBg="usuallyBg" :needConBlock="true">
			<block slot="content">订单支付</block>
		</custom-nav-sq-xcx>
		<block v-if="!isPayFlag">
			<view class="sqConBlock"></view>
			<view class="sqConWrap">
				<!-- <view class="orderImg hasFlex">
					<image class="userHead" :src="defHead"></image>
					<view class="imgContent">
						<view class="orderName">黄广奇咨询师</view>
						<view class="orderSm">咨询方式:视频咨询</view>
						<view class="orderPrice">
							<text>¥</text>
							<text class="priceNum">2656</text>
						</view>
					</view>
				</view> -->
				<view class="orderImg hasFlex">
					<image class="userHead" :src="defHead"></image>
					<view class="imgContent">
						<view class="orderName">心理发展心理学</view>
						<view class="orderSm">上传者:和心云<text style="margin: 0 10rpx;">|</text>共20节</view>
						<view class="orderPrice">
							<text>¥</text>
							<text class="priceNum">2656</text>
						</view>
					</view>
				</view>
				<view class="sqPayTit">咨询信息</view>
				<view class="sqZxInfo">
					<view class="infoItem">
						<view>咨询人</view>
						<view class="con">黄利峰</view>
					</view>
					<view class="infoItem">
						<view>联系方式</view>
						<view class="con">15236362623</view>
					</view>
					<view class="infoItem">
						<view>咨询时间</view>
						<view class="con">2024-02-20 15:00~16:00</view>
					</view>
				</view>
				<view class="sqPayTit">订单信息</view>
				<view class="sqZxInfo">
					<view class="infoItem">
						<view>订单金额</view>
						<view class="con">¥1200</view>
					</view>
					<view class="infoItem">
						<view>实付金额</view>
						<view class="con">¥1200</view>
					</view>
					<view class="infoItem">
						<view>下单时间</view>
						<view class="con">2024-02-20 15:22:32</view>
					</view>
					<view class="infoItem">
						<view>订单编号</view>
						<view class="con">fdsffdsfsfds2212</view>
					</view>
				</view>
				<view class="sqPayTit">支付方式</view>
				<view class="sqZxInfo smPadd">
					<view class="payType"
						v-for="(item,index) in payTypeList"
						:key="index"
						@tap="switchPayType(index,item.id)"
					>
						<view class="leftPayType">
							<view class="iconfont" :class="item.icon"></view>
							<view>
								{{item.name}}
							</view>
						</view>
						<view class="sel sq"
							:class="[payTypeIndex == index ? 'active' : '']"
						>
							<view class="iconfont icon-duihao"></view>
						</view>
					</view> 
				</view>
			</view>
			<view class="botSellPay">
				<view class="totalNum">
					<view class="hj">共计:</view>
					<view class="totalTxt">
						<view>
							<text class="unit">¥</text>
							<text class="priceNum">1200</text>
						</view>
					</view>
				</view>
				<view class="confirmBtn" @tap="goPay">确认支付</view>
			</view>
		</block>
		<block v-else>
			<view class="sqConBlock"></view>
			<view class="sqConWrap">
				<view class="payRes">
					<block v-if="callBackFlag">
						<view class="paySuccImg flexAll">
							<view class="innerPaySucc flexAll">
								<text class="iconfont icon-duihao"></text>
							</view>
						</view>
						<view class="payPrice">
							<text>¥</text>
							<text class="num">1200</text>
						</view>
						<view class="payTit">订单支付成功</view>
						<view class="paySucSmTit">订单编号：26232365231552</view>
						<button class="comBtn">查看订单详情</button>
						<view class="smBack">返回咨询师详情</view>
					</block>
					<block v-else-if="callBackFlag == false">
						<image class="payImg" :src="getStaticFilePath('fail.png')"></image>
						<view class="failTipsBig">支付失败</view>
						<view class="paySucSmTit">房贷首付附近的是否</view>
						<button class="comBtn">返回</button>
					</block>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				isPayFlag:false,
				callBackFlag:null,//true->返回200 false->返回其它code
				defHead:this.defHead,
				orderType:'',//zxOrder resOrder
				payTypeList:[
					// #ifdef APP-PLUS
					{id:'wx',name:'微信支付',icon:'icon-weixinzhifu'},
					{id:'zfb',name:'支付宝支付',icon:'icon-zhifubao'},
					// #endif
					// #ifdef MP-WEIXIN
					{id:'wx',name:'微信支付',icon:'icon-weixinzhifu'}
					// #endif
				],
				payTypeIndex:0,
				payType:'wx',
			}
		}
	}
</script>

<style src="@/static/fonts/staatliches.css"></style>
<style lang="scss">
	@import '@/static/scss/selPayType.scss';
	$fonts:'Staatliches';
	.orderImg{
		padding: 20rpx;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 10rpx;
		.userHead{
			width: 140rpx;
			height: 140rpx;
			margin-right: 15rpx;
			border-radius: 16rpx;
		}
		.orderName{
			font-size: 30rpx;
			color: $sq-main0;
			font-weight: 600;
			margin-bottom: 10rpx;
		}
		.orderSm{
			font-size: 26rpx;
			color: $sq-main8;
			margin-bottom: 5rpx;
		}
		.orderPrice{
			color: $pss-sq-red;
			font-size: 26rpx;
			.priceNum{
				font-size: 40rpx;
				font-weight: bold;
				font-family:$fonts;
				margin-left: 5rpx;
				letter-spacing: 2rpx;
			}
		}
	}
	.sqPayTit{
		height: 90rpx;
		line-height: 90rpx;
		font-size: 30rpx;
		color: $sq-main0;
		font-weight: 600;
	}
	.sqZxInfo{
		padding:20rpx;
		border-radius: 16rpx;
		background: #fff;
		margin-bottom: 10rpx;
		.infoItem{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 60rpx;
			font-size: 28rpx;
			color: $sq-maina;
			.con{
				color: $sq-main0;
			}
		}
		&.smPadd{
			padding: 0 20rpx;
		}
	}
	.botSellPay{
		height: 100rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: sticky;
		left: 0;
		bottom: 0;
		z-index: 20;
		box-shadow: 0 -3rpx 5rpx rgba(0,0,0,.05);
		.totalNum{
			width: 60%;
			height: 100%;
			display: flex;
			align-items: center;
			.hj{
				margin:0 15rpx 0 30rpx;
				font-size: 28rpx;
				color: $sq-main0;
			}
			.totalTxt{
				font-size: 26rpx;
				color: $pss-sq-red; 
				display: flex;
				flex-direction: column;
			}
			.totalTxt .unit{
				font-size: 24rpx;
				font-weight: bold;
				margin-right: 5rpx;
			}
			.totalTxt .priceNum{
				font-size: 40rpx;
				font-weight: 600;
				font-family:$fonts;
				letter-spacing: 2rpx;
			}
			
		}
		.confirmBtn{
			width: 300rpx;
			height: 100%;
			line-height: 100rpx;
			background:$pss-sq-main;
			color:#fff;
			font-size: 30rpx;
			text-align: center;
			padding: 0 20rpx;
		}
	}
	.payRes{
		text-align: center;
		.borRad{
			border-radius: 50%;
		}
		.comWid{
			width: 220rpx;
			height: 220rpx;
			margin: 200rpx 0 30rpx;
		}
		.payImg{
			@extend .comWid;
		}
		.paySuccImg{
			background: #fbdce0;
			@extend .comWid;
			@extend .borRad;
			.innerPaySucc{
				width: 180rpx;
				height: 180rpx;
				background: $pss-sq-red;
				@extend .borRad;
			}
			.icon-duihao{
				font-size: 100rpx;
				color: #fff;
			}
		}
		.payPrice{
			font-size: 26rpx;
			color: $pss-sq-red;
			.num{
				font-family: $fonts;
				font-size: 46rpx;
				font-weight: 600;
				margin-left: 5rpx;
				letter-spacing: 2rpx;
			}
		}
		.payTit{
			font-size: 28rpx;
			color:$sq-main0;
			margin: 10rpx 0;
		}
		.paySucSmTit{
			font-size:26rpx;
			color: $sq-main8;
			margin-bottom: 10rpx;
		}
		.comBtn{
			width: 560rpx;
			margin:100rpx auto 10rpx;
			border-radius: 50rpx;
			background: $pss-sq-main;
		}
		.smBack{
			text-align: center;
			padding: 20rpx 0;
			font-size: 26rpx;
			color: $sq-main8;
		}
		.failTipsBig{
			font-size: 32rpx;
			font-weight: 620;
			color:$sq-main0;
			text-align: center;
			margin:0rpx 0 10rpx;
		}
	}
	page{
		background: $sq-fuf;
	}
</style>